<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>南广 Web UI Base</title>
	<link rel="stylesheet/less" href="asset/all.less" />
	<script src="common/css/less-1.3.3.min.js"></script>

	<!-- 判断浏览器版本.IE7以下版本,bootstrap支持不了.加个提示 -->
	<!--[if IE]>      
		<!--[if IE 6]>
		  <!--<h5>您使用的浏览器版本是IE6,本站不支持此版本.请升级您的浏览器</h5>-->
		<![endif]-->
		<!-- 判断浏览器版本IE6以下版本 -->
		<!--[if lt IE 6]> 
		    <!-- <h5>您使用的浏览器版本低于IE7,本站不支持低版本浏览器.请升级您的浏览器</h5> -->
		<![endif]-->
		<!--[if IE 7]>
		<![endif]-->
	<![endif]-->
</head>
<body>
	<div class="nav">
		<ul>
			<li>
				<a href=".">首 页</a>
			</li>
			<li>
				<a href="#css">CSS</a>
			</li>
			<li>
				<a href="#javascript">JavaScript</a>
			</li>
			<li>
				<a href="#tools">工 具</a>
			</li>
			<li>
				<a href="http://blog.csdn.net/zhangxin09">博 客</a>
			</li>
			<li>
				<a href="http://bbs.ajaxjs.com">社 区</a>
			</li>
		</ul>
	</div>
	<br>
	<div class="intro">
		<h2>简介：</h2>
		<ol>
			<li>
				<img src="asset/images/38b8bf355c6034a85252603ecb1349540823767a.jpg" />
				羽量级，代码精简，加载迅速。
			</li>
			<li>
				<img src="asset/images/fdfd37ac5edf8db1c59ea4db0923dd54574e747a.jpg" />
				微内核，高度面向对象 JavaScript。
			</li>
			<li>
				<img src="asset/images/1dac5f6434a85edf803c269c49540923dc54757a.jpg" />
				跨平台，基于原生 HTML 5，兼容 Webkit、MSIE 8 和 Mozilla FireFox 浏览器，实现浏览器无差别化。
			</li>
			<li>
				<img src="asset/images/569e928ba0ec08faf1bfcb1859ee3d6d54fbda70.jpg" />
				定制化，通过 LESS 编写样式，兼容 Retina 高清分辨率，满足不同层次用户的需求。
			</li>
		</ol>
	</div>
	<a name="css"></a>
	<div style="margin:0 auto; width:940px;">
		<h2>按钮系列</h2>
		<ol>
			<li>
				<h3>普通美化按钮</h3>
				<ul class="list">
					<li>
						<button class="x-btn">提交</button>
					</li>
					<li>
						<a href="#">
							<button class="x-btn">关 闭</button>
						</a>
					</li>
				</ul>
				<p>用于分页的按钮</p>
				<div style="text-align: center;background-color: #f6f6f6;width:40%; padding:10px;">
					<button class="x-btn vG_gray_1" style="width:95%;" onclick="alert('加载更多……');">加载更多</button>
				</div>
				<p>包含图标的按钮@todo</p>
			</li>
			<li>
				<h3>水晶按钮</h3>
				<p>采用经典的“水晶”风格美化的按钮。@todo 修改 div 标签为 button</p>
				<ul class="list">
					<li>
						<div class="x_btn_aqua aqua">
							向 左
							<div class="glare"></div>
						</div>
					</li>

					<li>
						<div class="x_btn_aqua orange" style="margin-left:10px;">
							向 右
							<div class="glare"></div>
						</div>
					</li>
				</ul>
				<div class="clear" style="margin-bottom:30px;"></div>
			</li>

			<li>
				<h3>3D 立体按钮</h3>
				<ul class="list">
					<li>
						<button class="x_btn_liti">下载应用</button>
					</li>

					<li>
						<button class="x_btn_liti active">问题咨询</button>
					</li>
				</ul>

			</li>
			<li>
				<h3>文件上传按钮（包括表单）</h3>
				<script>
					// 提交事件
					function onSubmit(args, form){
						var e = args[0];
						var fileField = form.querySelector('input[type=file]');
						if(!fileField.value){
							e.preventDefault();
							alert('请选择图片');
							
							return;
						}
						if(fileField.value.indexOf('.png') != -1){
						}else if(fileField.value.indexOf('.gif') != -1){
						}else if(fileField.value.indexOf('.jpg') != -1){
						}else{
							e.preventDefault();
							alert('选择的不是图片格式！');
						}
					 }
					// 显示选择了什么
					function showMsg(_msg){
						var msg = document.querySelector('.msg');
						msg.innerHTML = '已选择图片：' + _msg;
					}
				</script>
				<div style="width:30%;text-align:center;border:1px gray dashed;padding:10px 30px;">
					<form action="?" onsubmit="onSubmit(arguments, this);">
						<div align="center">
							<div class="x-btn x-fileUploader" style="position:relative;">
								选取图片
								<input type="file" class="btn" onchange="showMsg(this.value);" />
							</div>
							<div class="msg"></div>
						</div>

						<ul>
							<li>
								<p>支持的图片格式：.jpeg|.jpg|.gif|.png|.bmp</p>
							</li>
							<li>
								<p>支持的图片大小：500KB，请压缩图片再上传</p>
							</li>
						</ul>
						<div align="center">
							<input class="x-btn" type="submit" value=" 提 交 "/>
						</div>
					</form>
				</div>
			</li>
		</ol>

		<h2>工具条系列</h2>
		<ol>
			<li></li>
			<li></li>
			<li></li>
		</ol>

		<h2>表格系列</h2>
		<a name="javascript"></a>
		<a name="tools"></a>
		<ol>
			<li>
				在线 base64 编码器
				<a href="http://webcodertools.com/imagetobase64converter">http://webcodertools.com/imagetobase64converter</a>
			</li>
			<li>
				css sprites
				<a href="http://csssprites.com/">http://csssprites.com/</a>
			</li>
			<li>
				清除冗余的 HTML 标签
				<a href="http://www.seabreezecomputers.com/htmlstripper/">http://www.seabreezecomputers.com/htmlstripper/</a>
			</li>
			<li>
				做 loading icon 的绝佳工具
				<a href="http://preloaders.net/en/circular">http://preloaders.net/en/circular</a>
				<a href="http://cssload.net/">http://cssload.net/</a>
				
			</li>
			<li>
				<a href="http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html">http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html</a>
				模拟 PS 滤镜的 CSS3 输出工具
				<a href="http://layerstyles.org/">http://layerstyles.org/</a>
			</li>
			<li>
				靠谱的中文书法字体
				<a href="http://www.shufami.com/">http://www.shufami.com/</a>
			</li>
			<li>
				转换 ico 格式图标
				<a href="http://www.prodraw.net/favicon/index.php">http://www.prodraw.net/favicon/index.php</a>
			</li>
			<li>
				图片优化
				<a href="http://www.smushit.com/ysmush.it/">http://www.smushit.com/ysmush.it/</a>
			</li>
			<li>
				Bookmarkleter
				<a href="http://chris.zarate.org/bookmarkleter">http://chris.zarate.org/bookmarkleter</a>
			</li>
			<li>
				免费素材
				<a href="http://freepsdfiles.net/">http://freepsdfiles.net/</a>
				无版权图标（矢量格式）
				<a href="http://www.iconarchive.com/">http://www.iconarchive.com/</a>

				<a href="http://iconizer.net">http://iconizer.net</a>
			</li>
			<li>
				背景图
				<a href="http://www.repeatxrepeaty.com/">http://www.repeatxrepeaty.com/</a>

				<a href="http://subtlepatterns.com/">http://subtlepatterns.com/</a>
			</li>

			<li>
				返回域名详细详细
				<a href="http://www.woorank.com/">http://www.woorank.com/</a>
			</li>
		</ol>
		<h3>最常用的字符实体 Character Entities （HTML特殊转义字符列表）</h3>
		<div class="styleTable_1" style="width:100%;">
			<table width="50%" class="x_borderTable" align="center">
				<tbody>
					<tr>
						<th>显示</th>
						<th>说明</th>
						<th>实体名称</th>
						<th>实体编号</th>
					</tr>
					<tr>
						<td class="key"></td>
						<td>半方大的空白</td>
						<td>&amp;ensp;</td>
						<td>&amp;#8194;</td>
					</tr>
					<tr></tr>
					<tr>
						<td class="key"></td>
						<td>全方大的空白</td>
						<td>&amp;emsp;</td>
						<td>&amp;#8195;</td>
					</tr>
					<tr></tr>
					<tr>
						<td class="key"></td>
						<td>不断行的空白格</td>
						<td>&amp;nbsp;</td>
						<td>&amp;#160;</td>
					</tr>
					<tr>
						<td class="key">&lt;</td>
						<td>小于</td>
						<td>&amp;lt;</td>
						<td>&amp;#60;</td>
					</tr>
					<tr>
						<td class="key">&gt;</td>
						<td>大于</td>
						<td>&amp;gt;</td>
						<td>&amp;#62;</td>
					</tr>
					<tr>
						<td class="key">&amp;</td>
						<td>&amp;符号</td>
						<td>&amp;amp;</td>
						<td>&amp;#38;</td>
					</tr>
					<tr>
						<td class="key">"</td>
						<td>双引号</td>
						<td>&amp;quot;</td>
						<td>&amp;#34;</td>
					</tr>
					<tr>
						<td class="key">©</td>
						<td>版权</td>
						<td>&amp;copy;</td>
						<td>&amp;#169;</td>
					</tr>
					<tr>
						<td class="key">®</td>
						<td>已注册商标</td>
						<td>&amp;reg;</td>
						<td>&amp;#174;</td>
					</tr>

					<tr>
						<td class="key">™</td>
						<td>商标（美国）</td>
						<td>™</td>
						<td>&amp;#8482;</td>
					</tr>
					<tr></tr>
					<tr>
						<td class="key">×</td>
						<td>乘号</td>
						<td>&amp;times;</td>
						<td>&amp;#215;</td>
					</tr>
					<tr>
						<td class="key">÷</td>
						<td>除号</td>
						<td>&amp;divide;</td>
						<td>&amp;#247;</td>
					</tr>
				</tbody>
			</table>
		</div>
		<ol>
			<li>空格 &nbsp;</li>
			<li>
				Em Dash
			(—):表示附加说明，或者想法，中文里的破折号就是这个意思。html转义符为&amp;mdash;，windows系统上打这个符号可以用Alt+
			151。
			</li>
			<li>
				En Dash (–):表示范围，比如从 1–10 。html转义符&amp;ndash;，windows系统用Alt+
			150。
			</li>
			<li>&amp; « &#171; &laquo; » &#187;&raquo; ‹ &lsaquo;&#8249; › &rsaquo;&#8250; &amp;amp;</li>
			<li>Δ &amp;Delta; &amp;#916;</li>
			<li>Λ &amp;Lambda; &amp;#923;</li>
			<li>√ &amp;radic; &amp;#8730;</li>
			<li>≠ &ne; &#8800;</li>
			<li>© &copy; &#169;</li>
			<li>® &reg; &#174;</li>
			<li>§ &sect; &#167;</li>
			<li>
				≥ &ge; &#8805; ⊂ &sub; &#8834; ⊃ &sup; &#8835; ⊄ &nsub;
			&#8836; ⊆ &sube; &#8838; ⊇ &supe; &#8839;
			</li>
		</ol>
	</div>
</body>
</html>